<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >账户管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>收支管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="refund_manager_content">
        <!-- 搜索框 -->
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <div class="refund_manager_search">
              <el-input
                v-model="searchKey"
                placeholder="请输入"
                size="small"
              ></el-input>
              <el-button
                type="primary"
                size="small"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row
          type="flex"
          justify="center"
          v-if="refundListData != undefined && refundListData.length > 0"
        >
          <el-col :span="24">
            <el-table
              :data="refundListData"
              border
              style="width: 100%"
              size="mini"
              :cell-style="cellStyleFn"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="order_number"
                label="订单编号"
                width="220"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="title"
                label="考试名称"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="exam_date"
                label="考试日期"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="name"
                label="支付人"
                width="160"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="refund_money"
                label="退款金额"
                width="120"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="refund_time"
                label="申请时间"
                align="center"
                width="180"
              ></el-table-column>

              <el-table-column
                label="操作"
                width="160"
                itemprop=""
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="agreeBtn(scope.$index, scope.row)"
                    >同意</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="rejectBtn(scope.$index, scope.row)"
                    >拒绝</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-if="refundListData != undefined && refundListData.length > 0"
        >
          <el-col :span="24">
            <div class="refund_manager_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-empty description="暂无申请"></el-empty>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/account/refundManager.css" scoped></style>

<script>
export default {
  name: "RefundManager",
  components: {},
  data() {
    return {
      refundListData: [], // 退款列表数据
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      searchKey: "", //搜索关键词
      orderStatusList: [
        {
          value: 1,
          label: "待支付",
        },
        {
          value: 2,
          label: "支付成功",
        },
        {
          value: 6,
          label: "退款成功",
        },
      ],
      withdrawalStatusList: [
        {
          value: 0,
          label: "未体现",
        },
        {
          value: 1,
          label: "提现中",
        },
        {
          value: 2,
          label: "已提现",
        },
      ],
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    this.getListDataFn();
  },
  methods: {
    // 搜索按钮
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 查询列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/order/refundApplyIndex";
      let data = {
        type: 1,
        keywords: this.searchKey,
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.refundListData = response.orderinfo;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ columnIndex }) {
      let style = "";
      if (columnIndex == 5) {
        style = "color: #F6705E";
      }
      return style;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 同意
    agreeBtn: function (index, row) {
      let id = row.id;
      this.reviewFn(id, 2);
    },
    // 拒绝
    rejectBtn: function (index, row) {
      let id = row.id;
      this.reviewFn(id, 1);
    },
    // 管理员审核
    reviewFn: function (id, key) {
      let that = this;
      let url = "";
      let text = "";
      let data = {
        order_id: id,
      };
      if (key == 2) {
        text = "同意";
        url = "/admin/wechatpay/agreeRefund";
      } else {
        text = "拒绝";
        url = "/admin/order/rejectRefund";
      }

      this.$confirm("确认" + text + "该申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("操作成功");
              let next = that.currentPage - 1;
              if (that.refundListData.length == 1) {
                that.currentPage = next >= 1 ? next : 1;
              }
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
  },
};
</script>
